<template>
  <div class="container">

    <el-container style="height: 100%">
      <el-header>

        <div style="height: 60px;">
          <div style="font-size: 35px; display: inline-block;margin-right: 15px;float: right;margin-top: 6.5px">
            图书电商平台
          </div>
          <img style="width: 50px;height: 50px;margin-top: 5px;display: inline-block;float: right;margin-right: 10px" src="../imgs/logo.png">
        </div>
      </el-header>
      <el-main>
        <div class="block">
          <router-view></router-view>
        </div>

        <div class="pic_block">
          <el-carousel style="height: 100%" trigger="click">
            <el-carousel-item style="height: 400px">
              <img src="../imgs/sign1.png">
            </el-carousel-item>
            <el-carousel-item style="height: 400px">
              <img src="../imgs/sign2.png">
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-main>
      <el-footer>
        <div style="margin-top: 20px">
          <a>京ICP备XXXXXXXX号  </a>
          <a>©2018-2022 北京图书管理能力有限公司</a>
        </div>
      </el-footer>
    </el-container>

  </div>

</template>

<script>
export default {
name: "SignPage"
}
</script>

<style scoped>
  .container{

  }

  .container img{
    width: 100%;
    height: 100%;
  }

  .block{
    position: absolute;
    left: 100px;
    top: 50%;
    transform: translate(0,-50%);
    width: 300px;
    height: 250px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 10px;
    padding: 20px 30px;
  }

  .pic_block{

    position: absolute;
    right: 50px;
    width: 700px;
    height: 400px;
    top: 50%;
    transform: translate(0,-50%);
  }

  .el-carousel-item img{
    background-color: rgba(0,0,0,0.6);
  }

  .el-header{

    background-image: linear-gradient(to right,#3399FF,#ffffff);
    /*background-color: rgb(242,242,242);*/
    color: #333;
    text-align: center;
    height: 60px;
  }
  .el-footer{
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    height: 60px;
  }

</style>
